<template>
	<view class="">
		<view style="background-color: #fff;padding: 20rpx 20rpx;margin: 20rpx 0;">
			<view class="button-title">
				<u-button class="button-title-box" color="#2D7FFD"
					@tap="gotoView(status)">{{ status===1?'公司配件申领':'添加个人配件'}}</u-button>
			</view>
			<view class="search-input">
				<u-search placeholder="请输入关键词" action-text="查询" v-model="params.keywords" shape="square"
					@search="search" @custom="search"></u-search>
			</view>
		</view>
		<nt-container>
			<view class="layout">
				<scroll-view class="layout-left">
					<view class="item" :class="{
						active: params.category_id1 === it.id
					}" v-for="(it, idx) in categoryList" :key="it.id" @tap="clickItem(it)">
						{{ it['name'] }}
					</view>
				</scroll-view>
				<view class="layout-right">

					<view class="categoryList2Warp">
						<view class="item" :class="{
							active: params.category_id2 === it2.id
						}" v-for="(it2, idx) in categoryList2" :key="it2.id" @tap="clickItem2(it2)">
							{{ it2['name'] }}
						</view>
					</view>

					<u-list @refresherrefresh="refresherrefresh" refresher-background="#F2F4F6" refresher-threshold="50"
						height="100%">
						<view class="item" v-for="(it,indxx) in listData" :key="indxx">
							<view class="item-body">
								<view class="image">
									<nt-cdn-image @imageTap="previewImage(it.images_list)"
										v-if="it.images_list.length>0" :src="it.images_list[0]"></nt-cdn-image>
									</u--image>
									<view v-if="it.images_list.length==0">
										<view style="font-size: 24rpx;text-align: center;line-height: 80rpx;">无图片</view>
									</view>
								</view>
								<view class="content">
									<view class="name" @tap="gotoDetail(it.id)">{{it.parts_name}}</view>
									<view class="number">{{it.area}}->{{it.parts_type}}</view>
									<view class="number">数量：{{it.number}}</view>
									<view class="price"><text class="price-title">{{it.parts_price || 0}}</text>元/个
									</view>
								</view>
							</view>
						</view>

					</u-list>
				</view>
			</view>
		</nt-container>
	</view>
</template>

<script>
	import {
		getPartsCategoryPaginate,
		getPersonPartsSelect,
		postPartsApply,
		getPartsApply
	} from "@/api"
	import {
		forEach
	} from "lodash";

	import {
		appConfig
	} from "@/config"
	export default {
		props: {
			status: {
				type: Number,
				default: 1 //1：公司配件，0：个人配件;
			}
		},
		mounted() {
			let that = this
			uni.$on('getList', async () => {
				// 操作成功 调取接口
				await that.getList()
			})
		},
		beforeDestroy() {
			uni.$off('getList')
		},
		watch: {
			status(n) {
				// 改变时  让一级分类和二级分类还原
				this.params.category_id1 = ''
				this.params.category_id2 = ''
				this.categoryList2 = []
				this.params.keywords = ''
				this.params.is_company = this.status
				this.getList()
			}
		},
		data() {
			return {
				isPull: false,
				scrollHeight: 0,
				params: {
					category_id1: '',
					category_id2: '',
					keywords: '',
					is_company: '',
				},
				categoryList: [],
				categoryList2: [],
				listData: [],
				isNext: true,
				loading: false,
			}
		},
		provide() {
			return {
				storehouseParts: this
			}
		},
		computed: {
			listHeight() {
				let convention = this.scrollHeight - 160;
				return convention
			}
		},
		created() {
			this.params.is_company = this.status
			this.init()
		},
		methods: {
			previewImage(url, current = 0) {
				let urls = url.map(o => (o = appConfig.imgCDN + o.replace(/\\/g, "/")))
				uni.previewImage({
					urls,
					current
				})
			},
			gotoDetail(id) {
				this.nav(`/subpackage/storehouse/pages/worker/parts/partsDetail?id=${id}`)
			},
			gotoView(status) {
				let map = {
					1: `/subpackage/storehouse/pages/worker/partsapply/index`,
					0: `/subpackage/storehouse/pages/worker/parts/modifyDetails`,
				}
				this.nav(map[this.status])
			},
			search() {
				this.getList()
			},
			valChange(e, it) {
				let itIn = '';
				let _this = this;
				this.info['parts_json'].forEach(function(it2, index) {
					if (it2.id == it.id) {
						itIn = 1;
						_this.info['parts_json'][index]['number'] = e.value;
					}
				})
				if (itIn == '') {
					this.info['parts_json'].push({
						'id': it.id,
						'area': it.area,
						'number': e.value,
						'parts_name': it.parts_name,
						'parts_price': it.parts_price,
					})
				}
			},
			getList() {
				if (this.loading || !this.isNext) return;
				this.loading = true
				this.listData = []
				this.params.category_id = this.params.category_id2 || this.params.category_id1 || ''
				getPersonPartsSelect(this.params).then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.listData = data;

					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			getCategoryList() {
				getPartsCategoryPaginate().then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						if (data.length > 0) {
							this.categoryList = [{
								name: '全部',
								id: ''
							}, ...data]
						}
					}
				})
			},
			clickItem(e) {
				if (this.loading) {
					return false
				}
				this.params.category_id1 = e.id
				this.params.category_id2 = ''
				this.categoryList2 = e.id ? [{
						name: '全部',
						id: ''
					}, ...e.level_list] : [],
					this.getList()
			},
			clickItem2(e) {
				if (this.loading) {
					return false
				}
				this.params.category_id2 = e.id
				console.log(this.params)
				this.getList()
			},
			refresherrefresh() {
				this.isPull = true
				this.isNext = true;
				this.init()
			},
			init() {
				this.list = []
				this.isNext = true;
				this.getCategoryList()
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.button-title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		&-box {
			margin-bottom: 18rpx;
			width: 50%;
		}
	}

	.selectIdWarp {
		display: flex;
		flex-wrap: wrap;
	}

	.selectitem {
		border: 1px solid #000;
		padding: 6rpx 8rpx;
		margin: 5px;
		border-radius: 8rpx;
	}

	.layout {
		display: flex;
		height: 100%;

		&-left,
		&-right {
			height: 100%;
		}

		&-left {
			width: 240rpx;
			flex-shrink: 0;
			// background: paleturquoise;
			background: #fff;

			.item {
				width: 100%;
				padding: 10rpx 15rpx;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333;
				background: #fff;
				border-bottom: 1rpx solid #f5f5f5;
				box-sizing: border-box;

				&.active {
					color: #fff;
					font-weight: bold;
					background: var(--theme-color)
				}

				.count {
					padding: 4rpx 6rpx;
					box-sizing: border-box;
					border-radius: 6rpx;
					background: #f00;
					color: #fff;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		&-right {
			flex: 1;
			margin-left: 20rpx;
			// background: peachpuff
			background: #fff;

			.categoryList2Warp {
				font-size: 28rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					&.active {
						color: #fff;
						font-weight: bold;
						background: var(--theme-color)
					}
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	/deep/.app-container {
		height: 100%;
	}

	.scroll-view {
		margin-top: 20rpx;

	}

	.search {
		height: 80rpx;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.check-tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		margin: 20rpx;
		background: #fff;

		&__item {
			flex: 1;
			text-align: center;
			color: #666;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			&.active {
				background: var(--theme-color);
				color: #fff;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1rpx;
				background: #f5f5f5
			}
		}
	}

	.item {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		&-body {
			display: flex;
			justify-content: space-between;
			position: relative;

			.image {
				height: 160rpx;
				width: 160rpx;
				background: #f5f5f5;
				border-radius: 6rpx;
				flex-shrink: 0;
			}

			.content {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(59, 130, 234, 1);
				}

				.price,
				.number {
					font-size: 20rpx;
					color: #666;
					margin-top: 6rpx;

					text {
						color: #f00;
					}
				}

				.price-title {
					font-size: 18px;
				}
			}
		}

	}
</style>